<template>
  <transition name="slide">
    <div class="mine">
      <!-- 这个地方不能写死了 -->
      <!-- <router-link class="back" to="/recommend">
        <i class="icon-back"></i>
      </router-link> -->
      <div class="back" @click="$router.back()">
        <i class="icon-back"></i>
      </div>
      <div class="title">
        个人中心
      </div>
      <div class="options">
        <router-link class="item" tag="div" v-for="item in items" :key="item.id" :to="item.path">
          <span>{{item.name}}</span>
        </router-link>
      </div>
      <div class="info">
        <p>
          Music Player
        </p>
        <p>
          展示用项目
        </p>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data () {
    return {
      items: [
        { id: 0, name: '我喜欢', path: '/mine/like' },
        { id: 1, name: '歌手', path: '/mine/singer' },
        { id: 3, name: '歌单', path: '/mine/songList' },
        { id: 4, name: '专辑', path: '/mine/album' },
        { id: 5, name: '榜单', path: '/mine/rank' },
        { id: 2, name: '播放历史', path: '/mine/history' }
      ],
      title: '',
      show: false
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../common/stylus/variable'
.slide-enter,.slide-leave-to
  transform: translateX(-100%);
.slide-enter-active,.slide-leave-active
  transition: all 0.5s ease;
.mine {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: 10;
  background-color: $color-background;
  .back {
    position:absolute;
    top: 10px;
    left: 10px;
    font-size: 22px;
    color: $color-theme;
  }
  .title {
    width: 60%;
    line-height: 44px;
    font-size: 18px;
    text-align: center;
    margin: 0 auto;
    color: $color-theme;
  }
  .options {
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    .item {
      width: 80%;
      height: 40px;
      line-height: 40px;
      margin: 10px auto;
      text-align:center;
      border-radius 20px;
      background-color: #666;
    }
  }
  .info {
    margin-top: 40px;
    text-align: center;
    p {
      font-size: 14px;
      height: 26px;
      line-height: 26px;
      color: #6d6d6d;
    }
  }
}
</style>
